<template>
  <div>
    <c-header :p-title="'消息管理'">
      <div class="d-flex justify-content-end align-items-center">
        <button class="btn btn-sm btn-primary m-r-sm"  @click='linkPageChange("messageAdd")'>发送新消息</button>
        <button type="button" class="btn btn-sm btn-info d-lg-block"  @click="$router.go(-1)"><i class="fa fa-mail-reply m-r-sm"></i>返回</button>
        <btn-refresh class='m-l-15' :p-data='init'></btn-refresh>
      </div>
    </c-header>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="table-responsive"  v-if='list'>
              <table class="vm table color-bordered-table base-bordered-table table-bordered table-hover">
                <thead>
                <tr class="nowrap">
                  <!--<th>ID</th>-->
                  <th>标题</th>
                  <th>时间</th>
                  <th width="60">操作</th>
                </tr>
                </thead>
                <tbody  v-show='list.length'>
                <tr v-for="(item,key) in list"  :class="{'tr_read':item.read==1}">
                  <!--<td>{{item.id}}</td>-->
                  <td>{{item.title}}</td>
                  <td>{{item.created_at}}</td>
                  <td class="no-h-bg">
                    <div class="table-edit-group">
                      <button class="btn btn-sm btn-info m-l-sm"  @click='linkPageChange("messageDetail",{id:item.id})'><i class="fa fa-eye"></i></button>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
              <div  v-show='!list.length' class="text-center m-b-sm">
                暂无数据！
              </div>
            </div>
            <hr/>
            <footer class="panel-footer text-right">
                <CPage :total="search.page_total"
                       :current='search.page_current'
                       :page-size='search.page_row'
                       @on-change='pageCurrentChange'
                       @on-page-size-change='pageRowChange'></CPage>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import serMessage from '../../serves/api-message'
    const __page_key = 'message.list';
    let searchDef = {
        page_row:'',
        page_current:'',
        page_total:''
    };
    export default{
        components:{
        },
        data(){
            return{
                list:undefined,
                search:{}
            }
        },
        computed:{
        },
        beforeMount(){
            this.searchReset();
        },
        mounted(){
            this.init();
        },
        methods:{
            searchReset(update,pageState){
                if(pageState){
                    this.$clientPage.def(this.search);
                    return false
                }
                const _p=this.$clientPage.getData(__page_key);
                if(_p){
                    this.$set(this,'search',_p);
                }else{
                    this.$set(this,'search',Object.assign({},searchDef));
                    this.$clientPage.def(this.search);
                }
                if(update){
                    //this.init();
                }
            },
            searchPage(page){
                this.$clientPage.set(this.search,page);
            },
            searchChange(){
                this.$clientPage.def(this.search);
                this.init();
            },
            pageRowChange(num){
                if(num!= this.search.page_row){
                    this.$set(this.search,'page_row',num);
                    if(this.search.page_current == 1){
                        this.init();
                    }
                }
            },
            pageCurrentChange(current){
                if(current!= this.search.page_current){
                    this.$set(this.search,'page_current',current);
                    this.init();
                }
            },
            linkPageChange(name,params,query){
                this.$clientPage.setData(__page_key,Object.assign({},this.search));
                if(name){
                    this.$router.push({name:name,params:params,query:query})
                }
            },
            //------------------------------------------------------------------------
            async init(data){
                let res = await serMessage.list({
                    page:this.search.page_current,
                    size:this.search.page_row,
                });
                if(res.code==1){
                    this.list = res.data||[];
                    this.searchPage(res.addtion_data&&res.addtion_data.page_info);
                }else{
                    this.list = [];
                    this.searchReset(undefined,true);
                    this.$Message.error(res.message);
                }
                return true;
            },
        }
    }
</script>
<style lang="scss">
  .tr_read{
    color:#afafaf;
  }
</style>